@inherits LayoutComponentBase
@inject NavigationManager NavigationManager;
@inject IJSRuntime JS

<div>
    <Header />

    <Sidebar Collapse=@CollapseSidebar Toggle=@(state => CollapseSidebar = state) />

    <div class="md:pl-64 flex flex-col flex-1">
        <div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-white dark:bg-black">
            <button type="button" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                @onclick=@(() => CollapseSidebar = false)>
                <span class="sr-only">Open sidebar</span>
                <!-- Heroicon name: outline/menu -->
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>
        <main class="flex-1">
            <div class="py-6">
                <div class="px-4 sm:px-6 md:px-8">
                    @Body
                </div>
            </div>
        </main>
    </div>

</div>

@code {
    bool CollapseSidebar = true;
}
